<template>
    <div class="manufacturers">
        <div class="title">
            <el-row :gutter="10" class="row-bg" justify="space-around">
                <el-col :span="4">
                    <el-input v-model.trim="searchInp" placeholder="名称搜索"></el-input>
                </el-col>
                <el-col :span="1" :offset="2">
                    <el-button type="primary" @click="searchName()">查询</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                    <el-button type="primary" @click="addOrEdit('add','厂家添加')">添加</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                    <el-button type="primary" @click="addOrEdit('replace','replace')">替换</el-button>
                </el-col>
            </el-row>
        </div>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" stripe style="width: 100%" v-loading.body="loading">
                    <el-table-column type="index" width="100">
                        <template scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.orderNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="厂家名称">
                        <template scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.manufacturersName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template scope="scope">
                            <el-tag>{{ scope.row.status == 1 ? "启用" : "禁用" }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template scope="scope">
                            <el-button size="small" @click="addOrEdit(scope.row,'厂家修改')">修改</el-button>
                            <el-button size="small" type="success" @click="updateStatus(scope.row,1)" v-if="scope.row.status === 0">启用</el-button>
                            <el-button size="small" type="danger" @click="updateStatus(scope.row,0)" v-else>禁用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="limit" :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="count">
        </el-pagination
        >
        <!-- 添加修改厂家 -->
        <el-dialog :title="dialogUtil.title" :visible.sync="dialogUtil.isShow" :modal-append-to-body="false" top="10%">
            <el-row>
                <el-col :span="21" :offset="1">
                    <el-input v-model.trim="dialogUtil.one" placeholder="请输入序列号" >
                        <template slot="prepend">序列号</template>
                    </el-input>
                </el-col>
                <el-col :span="21" :offset="1" style="margin-top : 20px">
                    <el-input v-model.trim="dialogUtil.two" placeholder="请输入厂家名">
                        <template slot="prepend">厂家名</template>
                    </el-input>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUtil.isShow = false">取 消</el-button>
                <el-button type="primary" @click="submitData(dialogUtil)">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 商家插入 -->
        <el-dialog title="厂家替换" :visible.sync="replaceOrder.isShow" :modal-append-to-body="false" top="10%">
            <el-row>
                <el-col :span="8" :offset="1">
                    <el-input v-model.trim="replaceOrder.one" placeholder="请输入要插入的序列号" >
                    </el-input>
                </el-col>
                <el-col :span="1" :offset="2">
                    <i class="el-icon-d-arrow-right" style="margin-top : 13px"></i>
                </el-col>
                <el-col :span="8" :offset="2">
                    <el-input v-model.trim="replaceOrder.two" placeholder="请输入被插入的序列号">
                    </el-input>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="replaceOrder.isShow = false">取 消</el-button>
                <el-button type="primary" @click="replaceSub(replaceOrder)">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
export default {
    name: "component_name",
    data() {
        return {
            tableData: [],
            searchInp: '',
            count: 0,
            skip: 0,
            limit: 10,
            loading: true,
            dialogUtil : { isShow : false ,title : '' , one : '' , two : '' , status : ''},
            replaceOrder : { isShow : false , one : '' , two : ''}
        }
    },
    methods: {
        replaceSub (res) {//替换 提交
            if(res.one == '' || res.two == ''){
                this.message("序列号不能为空","error");
                return;
            }
            let reg = /^[0-9]*[1-9][0-9]*$/; //判断正整数
            let regNum = reg.test(res.one);
            if(!regNum){
                this.message("请输入正确的序列号","error");
                return;
            }
            if(res.one == res.two){
                this.message("序列号相同","error");
                return ;
            }
            this.$http.post("api/manufacturers/replaceOrder", { one: res.one, two: res.two }).then(res => {
                let result = res.data;
                if(result.code == 100 ){
                    this.replaceOrder.isShow = false;
                    this.message("操作成功",'success');
                    this.initList();
                }
                if(result.code == 101 ){
                    this.replaceOrder.isShow = false;
                    this.message("序列号错误",'error');
                }
            })
        },
        updateStatus(row, status) {
            this.$http.post("api/manufacturers/updateStatusById", { updateId: row._id, status: status }).then(res => {
                let result = res.data;
                this.initList("updateStatus");
            }, err => {

            })
        },
        addOrEdit(res1,res2) {
            if(res1 == 'replace'){
                this.replaceOrder = { isShow : true , one : '' , two : ''}
            }else{
                this.dialogUtil = { isShow : true ,title : res2 , one : res1.orderNum , two : res1.manufacturersName, status : res1};
            }
        },
        submitData (res) {
            if(res.status == 'add'){
                this.createData(res);
            }else{
                this.updateById(res);
            }
        },
        createData: function(val) {
            if(val.one == ''){
                this.message("序列号不能为空","error");
                return;
            }
            let reg = /^[0-9]*[1-9][0-9]*$/; //判断正整数
            let regNum = reg.test(val.one);
            if(!regNum){
                this.message("请输入正确的序列号","error");
                return;
            }
            if(val.two == ''){
                this.message("厂家名称不能为空","error");
                return;
            }
            this.$http.post("api/manufacturers/create", { orderNum : val.one , manufacturersName: val.two }).then(res => {
                let result = res.data;
                if(result.code == 100){
                    this.initList();
                    this.message("添加成功",'success');
                    this.dialogUtil.isShow = false;
                }
                if( result.code == 101 ){
                    this.message(result.msg ,'error');
                }
            }, err => {

            })
        },
        updateById: function(val) {
            if(val.one == ''){
                this.message("序列号不能为空","error");
                return;
            }
            let reg = /^[0-9]*[1-9][0-9]*$/; //判断正整数
            let regNum = reg.test(val.one);
            if(!regNum){
                this.message("请输入正确的序列号","error");
                return;
            }
            if(val.two == ''){
                this.message("厂家名称不能为空","error");
                return;
            }
            this.$http.post("api/manufacturers/updateById", { orderNum : val.one , manufacturersName: val.two, updateId: val.status._id }).then(res => {
                let result = res.data;
                if(result.code == 100 ){
                    this.dialogUtil.isShow = false;
                    this.initList('updateData');
                }
                if( result.code == 101 ){
                    this.message(result.msg ,'error');
                }
            }, err => {

            })
        },
        handleCurrentChange: function(res) {
            if (res == 1)
                this.skip = 0;
            else
                this.skip = (res - 1) * this.limit
            this.initList();
        },
        handleSizeChange: function(res) {
            this.limit = res;
            this.initList();
        },
        initList: function(check) {
            this.$http.post("api/manufacturers/queryList", {
                manufacturersName: this.searchInp,
                skip: this.skip,
                limit: this.limit
            }).then(res => {
                let result = res.data;
                if (result.code == 100) {
                    this.loading = false;
                    this.tableData = result.data;
                    this.count = result.count;
                    if (check == 'updateStatus') {
                        this.message('操作成功', 'success');
                    }
                    if (check == 'searchName') {
                        this.message('查询成功', 'success');
                    }
                    if (check == 'updateData') {
                        this.message('修改成功', 'success');
                    }
                }
            }, err => {

            })
        },
        searchName: function() {
            this.initList('searchName');
        },
        message: function(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        }
    },
    created: function() {
        this.initList();
    }
}
</script>
<style lang="css" scoped>
.manufacturers {
  margin: 15px;
}

.title {
  margin-bottom: 15px;
}
.el-autocomplete {
  width: 100% !important;
}
</style>